<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div>
        <h1>知识点: keepalive 用来缓存组件,可以用它包裹router-view标签.通过这个视口展示的组件,就能够被缓存. 它自身有一些属性.include(要缓存的组件) exclude(不缓存的组件) max(最多缓存个数) vue2: 走了keepalive包裹的组件.第一进来走所有的生命周期.离开的时候走 deactived(失去激活) 下次进来只走actived(激活状态) vue3: 原理:在这个keepalive实现上,是在里面创先了一个缓存的对象. vue把一个个组件抽象成了一个vNode组件实例, 在进行组件加载的时候,判断如果对象里面有,就直接拿出来使用.如果没有,但是名字.如果在include里面的.或者不在exclude里面的,就是需要被缓存的. 就要存到这个对象里面.维护这个对象.当缓存的个数超过了max之后.就会把最早的删除掉.最新需要被缓存的push进来</h1>
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleChick">
            <el-tab-pane label="User" name='first'>User</el-tab-pane>
            <el-tab-pane label="Config" name="Second">Config</el-tab-pane>
            <el-tab-pane label="Role" name="third">Role</el-tab-pane>
            <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
        </el-tabs>
    
    </div>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import type { TabsPaneContext } from 'element-plus';
const activeName =ref('first')
const handleChick = (tab:TabsPaneContext,event:Event) =>{
    console.log(tab,event);
}

</script>
<style scoped>
.demo-tabs > .el-tabs_content{
    padding: 32px;
    color:#6b778c;
    font-size:32px;
    font-weight: 600;
}
</style>